简单实用：css+html绘制常见图表

提到绘制图表，大家可能想到ECharts，其实，一些简单的图表可以直接通过css+html实现，下面手把手带大家绘制，初学者也能轻松掌握。

我们先写一个超简单的html文件。

其中，最外层的div就是图表的背景板。内部的5个div是柱形图的5个柱形。 我们给最外层的div一个背景色和大小。

另外，内部的div默认是纵向排列的，我们让它横向排列，肩并肩，并设立宽度和高度。 为了方便观察，这里先给它加一个背景色。

这时候可以看到柱形图的轮廓了，接下来我们怎样设置柱形图百分比呢？ 这里用到线性渐变。

线性渐变linear-gradient内部第一个参数是方向，这里是从上到下。 后面的参数是颜色和颜色节点。 如果两个相邻的颜色节点之间，百分比相同，则颜色在该节点直接改变的，没有渐变效果。 如果两个相邻的颜色节点之间，百分比不同，则颜色在两个百分比节点之间渐变。

上面的代码对第一个内部div设置了渐变，从上到下，0%-30%透明，30%颜色变为#62a8fb，30%-60%颜色为#62a8fb，60%时颜色变为#5778d9。

使用线性渐变设置剩下的内部div。

绘制饼图就更加简单了。 这里也是使用渐变实现，不过是圆锥渐变。

还是先写一个超简单的html文件，简单到只有一行代码。

我们将这个div设置为圆形：给它一个宽和高度再设置圆角。 为了方便观察，这里也给它加一个背景色。

制作饼图用到圆锥渐变，我们前面讲到线性渐变，是向一个方向成直线渐变。 而圆锥渐变的起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。

由于方向固定(顺时针方向)，圆锥渐变省略了固定方向的参数。 圆锥渐变的参数组合和线性渐变类似，只是颜色后面不是百分比，而是角度。

代码如下：

用 HTML 和 CSS 也可以实现折线图。 折线图的线由角度不同的线段拼接而成，我们可以通过高度很小的div元素来模拟线条。然后用 transform 改变角度和位置。

首先我们先画一条线段。

一个超简单的html。

定义这个线段的宽高和背景色。

我们可以通过transform: rotate()调整线段的角度，通过position调整线段的位置。

让不同角度的线段拼接起来形成折线图。

我们修改html，添加多个线段。

修改多个线段的角度,长度和位置。